<template>
  <div class="home">
    <Swiper/>
    <Icons @toCourse="toCourse" @toOneToOne="toOneToOne" @toDate="toDate"/>
    <div v-for="(item, index) in list" :key="index">
      <div v-if="index<2" class="excellentCourses">
        <Title>{{item.channel_info.name}}</Title>
        <Card2 :data="item.list" @toCourseInfo="toCourseInfo"/>
      </div>
      <div v-else class="teachers">
        <Title>{{item.channel_info.name}}</Title>
        <Card1 :teacherList="item.list" @toTeacher="toTeacher"/>
      </div>
    </div>
    <van-dialog
      v-model="show"
      @confirm='toLogin'
      confirm-button-text="立即登录"
    >
      <i class="close" @click="show=false"></i>
      <img src="../assets/images/feiji.png">
      <p class="LoginText">赶紧登录一下吧</p>
      <p class="message">立即预约一对一辅导，浏览更多视频课程~</p>
    </van-dialog>
  </div>
</template>

<script>
import Swiper from '../components/home/Swiper';
import Icons from '../components/home/Icons';
import Title from '../components/common/Title';
import Card1 from '../components/common/Card1';
import Card2 from '../components/common/Card2';
import {recommend} from '../untils/netWork';
export default {
  name: 'Home',
  components: {
    Swiper,Icons,Title,Card1,Card2
  },
  data:()=>({
    list:[],
    show:false
  }),
  mounted(){
    recommend().then(res=>{
      this.list=res.data
    })
  },
  methods:{
    toCourseInfo(data){
      this.$router.push({
        path:`/courseInfo/${data}`
      })
    },
    toCourse(){
      this.$router.push("/course")
    },
    toLogin(){
      this.$router.push("/login")
    },
    toTeacher(id){
      if(!localStorage.username){
        this.show=true
      }else{
        this.$router.push("/teacher")
      }
    },
    toDate(){
      if(!localStorage.username){
        this.show=true
      }else{
        this.$router.push("/date")
      }
    },
    toOneToOne(){
      this.$router.push("/oneToOne")
    }
  }
}
</script>
<style lang="scss" scoped>
  .home{
    width: 100%;
    background: rgb(240, 240, 245);
    margin-bottom: 55px;
    .teachers,
    .excellentCourses{
      width: 100%;
      box-sizing: border-box;
      padding:0 10px;
    }
    .van-dialog{
      width:80%;
      height:360px;
      background:rgba(255,255,255,1);
      border-radius:30px;
      text-align: center;
      // .van-dialog__content,.van-dialog__footer{
      //   text-align: center;
      // }      
      .close{
        width: 20px;
        height: 20px;
        position: absolute;
        top: 15px;
        right: 20px;
        background-image: url('../assets/images/icon_member_account_close.png');
        background-size: 100%;
        background-position: center;
      }
      img{
        width: 100%;
        height: 200px;
        margin-top: 20px;
      }
      .LoginText{
        font-size:16px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height: 44px;
      }
      .message{
        font-size:13px;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(153,153,153,1);
        line-height: 38px;
      }
      .van-button{
        width:472px;
        height:80px;
        background:rgba(235,97,0,1);
        border-radius:40px;
        font-size:30px;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height: 80px;
        margin-top: 57px;
      }
    }
  }
</style>
